<template>
	<view class="teach">
		<view class="tit_box">
			<span class="tit_s">咨询师
				<view class="head">
					<image src="../../static/index/show.png"></image>
				</view>
			</span>
		</view>
		<label class="tit_s_i">查看相应咨询师的介绍</label>
		<view class="box">
			<view class="list_tea">
				<scroll-view class="scroll-view_H" enable-flex="true" scroll-x="true" show-scrollbar="true">
					<view v-for="(item,index) in teacher" :key="index">
						<view class="single" @click="gotoincroduc(item.id)">
							<view class="scro_img">
								<image :src="item.avatar"></image>
							</view>
							<view class="teacher_name">{{item.name}}</view>
							<view class="status" :style="item.status_color">{{item.status_text}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "teacher_list",
		data() {
			return {
				teacher: [{
						id: '01',
						avatar: "https://tse1-mm.cn.bing.net/th/id/R-C.d42505ae674ff6c864342df41d38772c?rik=K8isCjRh3RVJ1g&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f10%2f15%2f9ea6b80da0694dec944ce0bc0aff59aa.jpg&ehk=ly3KeB8Qyu2dUTjy3yMCWeOq%2fHCeSgaPFFg4%2bE6pFyQ%3d&risl=&pid=ImgRaw&r=0",
						name: "赵静",
						status_color: 'background-color: #9dd3a8;',
						status_text: "空闲"
					},
					{
						avatar: "https://tse1-mm.cn.bing.net/th/id/R-C.21b81871b0877d452d7f078630a0234f?rik=jE7RRhAsmOTP7w&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2017%2f05%2f24%2f72b32715007e42b2!400x400_big.jpg&ehk=dM7FAOrOEeJFzdF0fKCQeh3HHGiq1ja8uGDOGksU9to%3d&risl=&pid=ImgRaw&r=0",
						name: "贺春荣",
						status_color: 'background-color: #9dd3a8;',
						status_text: "空闲"
					},
					{
						avatar: "https://tse1-mm.cn.bing.net/th/id/R-C.7ca6e572d7f9c7d49b621dbd0ed2c195?rik=uyR84IDw%2bt6XFg&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2018%2f01%2f17%2fd46c6d2b6ef9f8bc!400x400_big.jpg&ehk=cGR6HeNhUhwuilIQuLfoPbuJEbUGvlKB2e%2fJXnvFm9E%3d&risl=&pid=ImgRaw&r=0",
						name: "田明月",
						status_color: 'background-color: #9dd3a8;',
						status_text: "空闲"
					},
					{
						avatar: "https://tse1-mm.cn.bing.net/th/id/R-C.86a0fa17b9b37ff7518b552e2517a0ae?rik=CX0%2fMchuLIBQVA&riu=http%3a%2f%2fimg.crcz.com%2fallimg%2f201809%2f11%2f1536666825645562.jpg&ehk=g6IGr0cDabvrRd5KSQdbup2trGpltKDfA7Hx7eopcm0%3d&risl=&pid=ImgRaw&r=0",
						name: "史振江",
						status_color: 'background-color: #ff585d;',
						status_text: "忙碌"
					},
					{
						avatar: "https://tse1-mm.cn.bing.net/th/id/R-C.f85d2f4621f817712f4ae907619bede9?rik=HcxW6WfXEBZPYg&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2017%2f12%2f28%2f83d7a7ebc37a404b!400x400_big.jpg&ehk=PJ3FE4YRNLkoBhWI1oTRgSeQia5EIAxyT50hmTY4oCg%3d&risl=&pid=ImgRaw&r=0",
						name: "孙丽",
						status_color: 'background-color: #ff585d;',
						status_text: "忙碌"
					},
				]
			};
		},
		methods: {
			gotoincroduc(e) {
				let teacher_id=e;
				uni.navigateTo({
					url: '/pages/teacherIntroduce/teacherIntroduce?id='+teacher_id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="less">
	.teach {
		width: 750rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		.box {
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.list_tea {
				width: 700rpx;
				height: 300rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;

				.scroll-view_H {
					white-space: nowrap;
					height: 300rpx;
					border-radius: 20rpx;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					align-items: center;

					.single {
						padding: 0 10rpx 0 10rpx;
						margin-top: 50rpx;
						width: 175rpx;
						height: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.teacher_name {
							font-size: 27rpx;
						}

						.status {
							width: 45rpx;
							height: 45rpx;
							border: 1px lightgray solid;
							border-radius: 50%;
							position: absolute;
							margin-top: 120rpx;
							margin-left: 120rpx;
							color: white;
							display: flex;
							overflow: hidden;
							justify-content: center;
							align-items: center;
							font-size: 18rpx;
						}

						.scro_img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 20rpx;
							overflow: hidden;
							box-shadow: 1px 1px 1px 1px lightgray;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}



				}
			}
		}

		span {
			display: block;
		}

		.tit_box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tit_s {
				font-size: 30rpx;
				display: flex;
				align-items: center;

				.head {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}


		.tit_s_i {
			margin-top: 10rpx;
			font-size: 20rpx;
			color: gray;

		}
	}
</style>
